import React, { Component } from 'react'
import '../assert/css/Cate.css'
import { getCate, getGoods } from '../request/cate_request'
export default class Cate extends Component {
    state = {
        getCate_list: [],
        getGoods_list: [],
        active_id: 1,
        cate_name: '时令水果'
    }
    change(active_id, cate_name) {
        this.setState({ active_id, cate_name })
        getGoods(active_id).then(res => {
            this.setState({ getGoods_list: res.list })
        })
    }
    componentWillMount() {
        getCate().then(res => {
            this.setState({ getCate_list: res.list })
            let obj = res.list[0]
            this.change(obj.id, obj.catename)
        })
        getGoods().then(res => {
            this.setState({ getGoods_list: res.list })
        })
        console.log(this.props);
    }
    componentWillUnmount() {
        this.setState = () => false  //重置setState，防止由于接口响应缓慢导致组件卸载后数据渲染
    }
    render() {
        let { getCate_list, getGoods_list, active_id, cate_name } = this.state
        let {history} =this.props
        return (
            <>
                <div className="page-title">商品分类</div>

                <div className="content">
                    <ul className="left">
                        {
                            getCate_list.map(item => (
                                <li className={active_id === item.id ? "active" : ''} key={item.id} onClick={() => this.change(item.id, item.catename)}>{item.catename}</li>
                            ))
                        }
                    </ul>
                    <ul className="right">
                        <li className="section">
                            <h3>{cate_name} <span id='more' onClick={()=>history.push('/goodslist?type_id='+active_id+'&type_name='+cate_name)}>查看更多 &gt;&gt;</span></h3>
                            <ul>
                                {
                                    getGoods_list.map(item => (
                                        <li key={item.id}>
                                            <img src={this.$static_host + item.img} alt="" />
                                            <p>{item.goodsname}</p>
                                        </li>
                                    ))
                                }

                            </ul>
                        </li>
                    </ul>
                </div>
            </>
        )
    }
}
